<template>
  <main class="flex w-screen h-screen">
    <!-- 侧边栏菜单 -->
    <side-menu />

    <!-- 内容区域 -->
    <section class="flex flex-col flex-1 overflow-hidden">
      <navbar />
      <history-link />
      <div class="flex-1 mb-1 mr-1 overflow-y-auto">
        <router-view #default="{ Component }">
          <Transition
            appear
            class="animate__animated"
            enter-active-class="animate__fadeInRight"
            leave-active-class="animate__fadeOutLeft">
            <component :is="Component" class="w-full" />
          </Transition>
        </router-view>
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
import menuServie from '@/hooks/useMenus';
import { useRoute } from 'vue-router';
import historyLink from './component/history-link.vue';
import navbar from './component/navbar.vue';
import sideMenu from './component/side-menu.vue';
import { watch } from 'vue';

// 添加历史信息
const route = useRoute();
watch(
  route,
  () => {
    menuServie.addHistoryMenu(route);
  },
  {
    immediate: false,
  },
);
</script>
<style scoped lang="scss">
.left-menu {
  @apply w-[200px] bg-[#2f4058] p-2 m-1 rounded-md;

  .admin-title {
    height: 40px;
    font-size: 20px;
    color: aliceblue;
  }
}
.animate__fadeInRight,
.animate__fadeOutLeft {
  animation-duration: 500ms;
}
</style>
